<script setup lang="ts">
import { ref } from 'vue';
import Sidebar from "@/components/Sidebar.vue";
import Navbar from "@/components/Navbar.vue";

const sidebarExpanded = ref(true);

const toggleSidebar = () => {
  sidebarExpanded.value = !sidebarExpanded.value;
};
</script>

<template>
  <div class="flex h-screen">
    <Sidebar :expanded="sidebarExpanded"/>
    <div class="flex-1 flex flex-col">
      <Navbar :expanded="sidebarExpanded" @toggleSidebar="toggleSidebar"/>
      <main class="p-4 flex-1 overflow-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full
    [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300
    dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
        <router-view/>
      </main>
    </div>
  </div>
</template>

<style scoped>

</style>
